<template>
  <div>
    <Header :isGoBack="false" :width="1000">
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="overall-report w1000">
      <el-tabs v-if="['first', 'second', 'fifth', 'third'].includes(activeName)" v-model="activeName" type="card"
        @tab-click="handleClick">
        <el-tab-pane v-if="activeName == 'first'" label="学习时长报告" name="first">
          <div class="report-tab-container">
            <div>
              <div class="time-title mb20">
                <span class="pre-icon click" @click="changeMouth(-1)">
                  <i class="el-icon-arrow-left"></i>
                </span>
                <span class="now-time">
                  {{ checkedYear }}年{{ checkedMouth }}月
                </span>
                <span class="next-icon click" @click="changeMouth(1)">
                  <i class="el-icon-arrow-right"></i>
                </span>
              </div>
            </div>
            <div>
              <el-calendar :value="timeValue">
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template slot="dateCell" slot-scope="{ date, data }">
                  <div class="calendar-item" :class="data.type == 'current-month' &&
                    checkedDay == new Date(date).getDate()
                    ? 'is-checked'
                    : ''
                    " @click.stop="checkTimeItem(date, data)">
                    <div class="calendar-item-box">
                      <span class="progress-bg" v-if="data.type == 'current-month'">
                        <el-progress class="my_progress" :width="40" :height="40" type="circle"
                          :percentage="getPercentage(date, data).progessNum" :format="() => {
                            return formatProgress(date, data);
                          }
                            " :color="$store.getters.color_main" :stroke-width="4"></el-progress>
                      </span>
                      <span v-else>
                        {{ formatProgress(date, data) }}
                      </span>
                    </div>
                  </div>
                </template>
              </el-calendar>
            </div>
            <div class="day-info">
              <h4>{{ checkedMouth }}月{{ checkedDay }}日的详细时长</h4>
              <div v-if="theDayData">
                <ul class="all-type mr20">
                  <li class="mr10">
                    <span class="time">
                      {{ theDayData.use_time | filterTime }}
                    </span>
                    <span class="text">有效时长</span>
                  </li>
                  <li>
                    <span class="time">
                      {{ theDayData.online_time | filterTime }}
                    </span>
                    <span class="text">在线时长</span>
                  </li>
                </ul>
                <ul class="item-type">
                  <li>
                    <div class="title">单词王</div>
                    <div>
                      <p>有效 {{ theDayData.word_time | filterTime }}</p>
                      <!-- <p>在线 {{ theDayData.online_time | filterTime }}</p> -->
                    </div>
                  </li>
                  <li>
                    <div class="title">阅读</div>
                    <div>
                      <p>有效 {{ theDayData.read_time | filterTime }}</p>
                      <!-- <p>在线 {{ theDayData.online_time | filterTime }}</p> -->
                    </div>
                  </li>
                  <li>
                    <div class="title">语法通</div>
                    <div>
                      <p>有效 {{ theDayData.grammar_time | filterTime }}</p>
                      <!-- <p>在线 {{ theDayData.online_time | filterTime }}</p> -->
                    </div>
                  </li>
                  <li>
                    <div class="title">同步句子</div>
                    <div>
                      <p>有效 {{ theDayData.sentence_time | filterTime }}</p>
                      <!-- <p>在线 {{ theDayData.online_time | filterTime }}</p> -->
                    </div>
                  </li>
                </ul>
              </div>
              <div v-else>暂无学习数据</div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 单词速记王 -->
        <el-tab-pane v-if="activeName == 'second' || activeName == 'fifth'" label="单词速记王进度报告" name="second">
          <div class="report-tab-container">
            <el-radio-group v-model="checkedType">
              <el-radio-button :label="1">课程统计</el-radio-button>
              <el-radio-button :label="2">每周报告</el-radio-button>
              <el-radio-button :label="3">每月报告</el-radio-button>
            </el-radio-group>
            <div class="radio-item" v-if="checkedType == 1">
              <template>
                <el-table :data="tableData" style="width: 100%; margin-top:20px;">
                  <el-table-column label="单词速记王汇总统计" align="center">
                    <el-table-column prop="memory" label="智能记忆">
                    </el-table-column>
                    <el-table-column prop="listening" label="智能词听">
                    </el-table-column>
                    <el-table-column prop="listeningWrite" label="智能听写">
                    </el-table-column>
                    <el-table-column prop="write" label="智能默写">
                    </el-table-column>
                    <el-table-column prop="word_review_num" label="总复习次数">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </template>
              <div class="class-item" v-for="(bookData, index) in classData" :key="index">
                <h4 class="flex-space-be">
                  <span>
                    {{ bookData.edition_name }}-{{ bookData.grade_name }}
                  </span>
                  <span class="info">单词数：{{ getTotalNum(bookData) }} </span>
                </h4>
                <div class="class-schedule">
                  <ul>
                    <div v-for="(model, index) in bookData.classData" :key="index">
                      <!-- v-if="categoryObj[model.category]!='词听'&&categoryObj[model.category]!='默写'" -->
                      <li style="justify-content: space-between">
                        <div style="display:flex;">
                          <span v-if="bookData.book_id == 2070 ||
                            bookData.book_id == 2071
                            " class="mr20">
                            {{ naturalCategoryObj[model.category] }}
                          </span>
                          <span v-else class="mr20">
                            智能{{ categoryObj[model.category] }}
                            <!-- <span class="info-number"
                          >(第{{ model.number }}遍)</span
                        > -->
                          </span>

                          <el-progress :color="$store.getters.color_main" :percentage="model.progessNum"></el-progress>
                          <div class="study-schedule">
                            <span v-for="unitStatus in model.word_total_vo_list" :key="unitStatus.category"
                              class="schedule-icon" :class="statusClass[unitStatus.status]">
                              <el-progress class="" v-if="unitStatus.status == 1" :show-text="false" type="circle"
                                :percentage="75" :width="12" :height="12" :stroke-width="2"
                                :color="$store.getters.color_main"></el-progress></span>
                          </div>
                          <div class="study-schedule ml30">
                            <el-tooltip v-for="(status, index) in getStatus(
                              bookData.book_id,
                              model.category
                            )" :key="index" class="item" effect="dark" :content="`${status.unit_name} ${status.statue == 0
  ? ' (未学) '
  : status.statue == 1
    ? ' (正在学) '
    : status.statue == 2
      ? ' (未测) '
      : status.statue == 3
        ? ' (未通过) '
        : status.statue == 4
          ? ' (通过) '
          : ''
  } ${status.study_number ? status.study_number : 0
  }/${status.word_sum}`
  " placement="bottom">
                              <span class="schedule-icon" :class="statusClass[
                                !status.study_number ? 0 : status.statue
                              ]
                                ">
                                <el-progress v-if="status.statue == 1 &&
                                  status.study_number > 0
                                  " :show-text="false" type="circle" :percentage="75"
                                  :color="$store.getters.color_main" :width="12" :height="12"
                                  :stroke-width="2"></el-progress>
                              </span>
                            </el-tooltip>
                          </div>
                        </div>

                        <!-- <span class="mr20" style="margin-left:20px;">单词总数 {{model.totalNum}}</span> -->
                        <div v-if="model.studyNum > 0" style="min-width:50px">
                          已学<span style="padding-left:5px;">{{
                            model.studyNum
                          }}</span>
                        </div>
                        <div style="min-width:50px" v-else>未学</div>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
            <div v-if="checkedType == 2">
              <div class="radio-item common-table common-pagination mt20 clear">
                <el-table ref="weekTable" border :data="weekData.list">
                  <el-table-column prop="time" label="周次" width="200"></el-table-column>
                  <el-table-column prop="totalLearningString" label="总学习量"></el-table-column>
                  <el-table-column prop="totalNewWordString" label="总生词量"></el-table-column>
                  <el-table-column prop="totalReviewString" label="总复习量"></el-table-column>
                  <el-table-column label="有效时长">
                    <template slot-scope="scope">
                      <div>
                        <span v-if="scope.row.book_plan_vo_list[0] &&
                          scope.row.book_plan_vo_list[0].use_time
                          ">
                          {{
                            scope.row.book_plan_vo_list[0].use_time
                            | filterTime(1)
                          }}
                        </span>
                        <span v-else>-</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="学币">
                    <template slot-scope="scope">
                      <div>{{ scope.row.book_plan_vo_list[0].integral }}</div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination @current-change="handleCurrentChangeWeek" class="fr" background
                  :page-size="weekParams.pageSize" layout="prev, pager, next" :total="weekData.total_num"
                  hide-on-single-page>
                </el-pagination>
              </div>
            </div>
            <div v-if="checkedType == 3">
              <div class="radio-item common-table common-pagination mt20">
                <el-table border :data="mouthData.list" style="width: 100%">
                  <el-table-column prop="time" label="月份" width="200">
                  </el-table-column>
                  <el-table-column label="总学习量" width="180">
                    <template slot-scope="scope">
                      <div>
                        <span>{{
                          scope.row.book_plan_vo_list.reduce((total, item) => {
                            return total + item.word_number;
                          }, 0)
                        }}</span>
                        (<span v-for="(item, index) in scope.row.book_plan_vo_list" :key="index">
                          <span v-if="index > 0"> /</span>{{ item.word_number }} </span>)
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="总生词量" width="180">
                    <template slot-scope="scope">
                      <div>
                        <span>{{
                          scope.row.book_plan_vo_list.reduce((total, item) => {
                            return total + item.number;
                          }, 0)
                        }}</span>
                        (<span v-for="(item, index) in scope.row.book_plan_vo_list" :key="index">
                          <span v-if="index > 0">/</span>{{ item.number }} </span>)
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="总复习量" width="180">
                    <template slot-scope="scope">
                      <div>
                        <span>{{
                          scope.row.book_plan_vo_list.reduce((total, item) => {
                            return total + item.review_num;
                          }, 0)
                        }}</span>
                        (<span v-for="(item, index) in scope.row.book_plan_vo_list" :key="index">
                          <span v-if="index > 0">/</span>{{ item.review_num }} </span>)
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效时长">
                    <template slot-scope="scope">
                      <div>
                        <span v-if="scope.row.book_plan_vo_list[0] &&
                          scope.row.book_plan_vo_list[0].use_time
                          ">
                          {{
                            scope.row.book_plan_vo_list[0].use_time
                            | filterTime(1)
                          }}
                        </span>
                        <span v-else>-</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="学币">
                    <template slot-scope="scope">
                      <div>{{ scope.row.book_plan_vo_list[0].integral }}</div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination @current-change="handleCurrentChangeMouth" class="fr" background
                  :page-size="mouthParams.pageSize" layout="prev, pager, next" :total="mouthData.total_num"
                  hide-on-single-page>
                </el-pagination>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 同步句子进度报告 -->
        <el-tab-pane v-if="activeName == 'fifth' || activeName == 'second'" label="同步句子进度报告" name="fifth">
          <div class="report-tab-container">
            <el-radio-group v-model="checkedType">
              <el-radio-button :label="1">课程统计</el-radio-button>
            </el-radio-group>
            <div class="radio-item">
              <template>
                <el-table :data="tableDataSentence" style="width: 100%; margin-top:20px;">
                  <el-table-column label="同步句子汇总统计" align="center">
                    <el-table-column prop="memory" label="听音组句">
                    </el-table-column>
                    <el-table-column prop="listening" label="听力理解">
                    </el-table-column>
                    <el-table-column prop="listeningWrite" label="连词成句">
                    </el-table-column>
                    <el-table-column prop="write" label="句子默写">
                    </el-table-column>
                    <el-table-column prop="sync_sentence_review_num" label="总复习次数">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </template>
              <div class="class-item" v-for="(bookData, index) in sentenceData" :key="index">
                <h4 class="flex-space-be">
                  <span>
                    {{ bookData.edition_name }}-{{ bookData.grade_name }}
                  </span>
                  <span class="info">单词数：{{ getTotalNum(bookData) }} </span>
                </h4>
                <div class="class-schedule">
                  <ul>
                    <li style="justify-content: space-between" v-for="(model, index) in bookData.classData" :key="index">
                      <div style="display:flex;">
                        <span class="mr20">
                          {{ sentenceCategoryObj[model.category] }}
                          <!-- <span class="info-number"
                          >(第{{ model.number }}遍)</span
                        > -->
                        </span>
                        <el-progress :color="$store.getters.color_main" :percentage="model.progessNum"></el-progress>
                        <div class="study-schedule">
                          <span v-for="unitStatus in model.word_total_vo_list" :key="unitStatus.category"
                            class="schedule-icon" :class="statusClass[unitStatus.status]">
                            <el-progress class="" v-if="unitStatus.status == 1" :show-text="false" type="circle"
                              :percentage="75" :width="12" :height="12" :stroke-width="2"
                              :color="$store.getters.color_main"></el-progress></span>
                        </div>
                        <div class="study-schedule ml30">
                          <el-tooltip v-for="(status, index) in getSentenceStatus(
                            bookData.book_id,
                            model.category
                          )" :key="index" class="item" effect="dark" :content="`${status.unit_name} ${status.statue == 0
  ? ' (未学) '
  : status.statue == 1
    ? ' (正在学) '
    : status.statue == 2
      ? ' (未测) '
      : status.statue == 3
        ? ' (未通过) '
        : status.statue == 4
          ? ' (通过) '
          : ''
  } ${status.study_number ? status.study_number : 0
  }/${status.word_sum}`
  " placement="bottom">
                            <span class="schedule-icon" :class="statusClass[status.statue]">
                              <el-progress v-if="status.statue == 1" :show-text="false" type="circle" :percentage="75"
                                :color="$store.getters.color_main" :width="12" :height="12"
                                :stroke-width="2"></el-progress>
                            </span>
                          </el-tooltip>
                        </div>
                      </div>

                      <!-- <span class="mr20" style="margin-left:20px;">单词总数 {{model.totalNum}}</span> -->
                      <div v-if="model.studyNum > 0" style="min-width:50px">
                        已学<span style="padding-left:5px;">{{
                          model.studyNum
                        }}</span>
                      </div>
                      <div style="min-width:50px" v-else>未学</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 学习统计报告 -->
        <el-tab-pane v-if="activeName == 'third'" label="学习统计报告" name="third">
          <div class="report-tab-container">
            <div class="studyReport-top">
              <el-row :gutter="20">
                <el-col :span="9" :offset="1">
                  <el-date-picker class="studyReport-top" v-model="value1" type="daterange" align="right" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                  </el-date-picker>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" :loading="loading" @click="getSearchStudy">查询</el-button>
                </el-col>
              </el-row>
            </div>
            <div id="studyInfoMap" class="studyInfoMap" v-loading="loading"></div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-tabs v-else>
        <!-- astiveName == 1 -->
        <el-tab-pane label="单词速记王" name="1">
        </el-tab-pane>
        <el-tab-pane label="同步句子" name="2">
        </el-tab-pane>
        <el-tab-pane label="同步课文" name="3">
        </el-tab-pane>
        <el-tab-pane label="同步联系" name="4">
        </el-tab-pane>
        <el-tab-pane label="单词库" name="5">
        </el-tab-pane>
        <el-tab-pane label="体验生词库" name="6">
        </el-tab-pane>

      </el-tabs>
  <div class="report-tab-container">
            <!-- 第一行、搜索 -->
            <el-row style="height: 60px;">
              <div class="report-tab-home">
                <div class="report-tab-home_1 display_flex_left">
                   <select class="selects" style="width: 90%;font-size: 16px;box-shadow: 0 0 0 0;border:0;">
                        <option value="1">-人教版-九年级-上学期-</option>
                      </select>
                </div>
                <div class="report-tab-home_2 display_flex">
                  <span>模块：</span>
                      <select class="selects">
                        <option value="1">-全部-</option>
                      </select>
                </div>

                <div class="report-tab-home_3 display_flex">
                  <span>模块：</span>
                      <select class="selects">
                        <option value="1">-全部-</option>
                      </select>
                </div>
                <div class="report-tab-home_4 display_flex">
                    <el-date-picker
                    v-model="Dtime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
                <div class="report-tab-home_5 display_flex">
                  <button class="button button_bg_del">查询</button>
                  <!-- 报告和颜色 -->
                  <div class="report-tab-home_5-1">
                    <div class="report-tab-home_5-1_1 display_flex">
                      <button class="button button_bg_queren">报告</button>
                    </div>
                    <div class="report-tab-home_5-1_1">
                      <ul class="report-tab-home_two_1_ul">
                      <li v-for="(item,id) in colors" :key="id" >
                        <div :style="{backgroundColor:item.color}"></div>
                        <span style="font-weight:bold; color:rgba(0,0,0,0.7);">{{item.name}}</span>
                      </li>
                    </ul>
                    </div>
                  </div>
                </div>
              </div>
            </el-row>
            <!-- echarts -->
            <el-row style="height: 500px;">
              <div class="report-tab-home" style="flex: 1;">
                <!-- echart show -->
                <div id="datashow" class="report-tab-home-two display_flex">
                  
                </div>
              </div>
            </el-row>

          </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import {
  searchStudyReportIntelligentReview,
  searchStudyReportSynchronizeSentences,
  searchStudyReportSynchronizeSentencesReview,
  searchStudyReportSynchronizeTesto,
  searchStudyReportSynchronizedPractice,
  searchSmartReviewIsSkip,
  searchWordReviewNumList,
  searchStudyReportExperienceWordLibrary,
  searchStudyReportWordShorthand
} from "@/api/report"
import {
  getOnlineTime,
  getClassData,
  countWordNumForSentence,
  getUnitStatusList,
  findBookDetailsForSentence,
  getStudyDataWeek,
  getStudentStudyWordInfo,
  // findStudyCentreNum,
} from "@/api/index";

import { formatDate, dealDate } from "@/utils/dateUtil";
export default {
  data() {
    return {
      // 颜色数组
      colors: [
        {
          id: 1,
          name:"学新单词数",
          color:"#3caa85"
        },
        {
          id: 2,
          name:"学新掌握率",
          color:"#e1e135"
        },
        {
          id: 3,
          name:"今日学生词数",
          color:"#9a8209"
        },
        {
          id: 4,
          name:"生词掌握率",
          color:"#2a26ec"
        },
        {
          id: 5,
          name:"需复习单词数",
          color:"#0b9c21"
        },
        {
          id: 6,
          name:"复习单词数",
          color:"#819384"
        },
        {
          id: 7,
          name:"遗忘单词数",
          color:"#f86790"
        },
        {
          id: 8,
          name:"复习正确率",
          color:"#9b05ac"
        }
      ],

      sentenceData: [],
      sentenceUnitStatusList: [],
      tableDataSentence: [],
      sentenceTotal: {
        memory: 0,
        listening: 0,
        listeningWrite: 0,
        write: 0,
      },
      wordTotal: {
        memory: 0,
        listening: 0,
        listeningWrite: 0,
        write: 0,
      },
      tableData: [],
      weekParams: {
        pageSize: 10,
        pageNum: 1,
      },
      weekData: {
        total_num: 0,
        list: [],
      },

      mouthParams: {
        pageSize: 10,
        pageNum: 1,
      },
      mouthData: {
        total_num: 0,
        list: [],
      },
      activeName: "first",
      checkedType: 1,
      onLineTimeData: {
        duration_today_vo_list: [],
      },
      classData: [],
      unitStatusList: [],
      categoryObj: {
        0: "记忆",
        1: "词听",
        2: "听写",
        3: "默写",
      },
      naturalCategoryObj: {
        0: "见词能读",
        2: "听音能写",
      },
      sentenceCategoryObj: {
        0: "听音组句",
        1: "听力理解",
        2: "连词成句",
        3: "句子默写",
      },
      statusClass: {
        0: "study-nolearn",
        1: "study-learning my_progress",
        2: "study-quick",
        3: "study-nopass",
        4: "study-pass",
        5: "study-ultimate",
      },
      checkedData: {},
      checkedYear: null,
      checkedMouth: null,
      checkedDay: null,
      value1: [],
      loading: false,
      param: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },

          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 183);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    theDayData() {
      let data = this.onLineTimeData.duration_today_vo_list.filter((item) => {
        return item.create_time == this.checkedDay;
      });
      if (data.length > 0) {
        return data[0];
      } else {
        return null;
      }
    },
    timeValue() {
      if (this.checkedYear && this.checkedMouth) {
        return this.checkedYear + "/" + this.checkedMouth;
      }
      return "";
    },
  },
  components: {
    Header,
  },
  methods: {
    handleClick(tab, event) {
      console.log("click Tab:", tab, event);
    },
    async findStudyCentreNum() {
      const num = this.unitStatusList.reduce((prev, item) => {
        const number = item.unit_student_details_vo_list.reduce(
          (prev1, item1) => {
            prev1 += item1.review_num;
            return prev1;
          },
          0
        );
        prev += number;
        return prev;
      }, 0);
      const tableData = { word_review_num: num, ...this.wordTotal };
      this.$set(this.tableData, 0, tableData);
    },
    async findSentenceTotal() {
      const num = this.sentenceUnitStatusList.reduce((prev, item) => {
        const number = item.unit_student_details_vo_list.reduce(
          (prev1, item1) => {
            prev1 += item1.review_num;
            return prev1;
          },
          0
        );
        prev += number;
        return prev;
      }, 0);
      const tableData = {
        sync_sentence_review_num: num,
        ...this.sentenceTotal,
      };
      this.$set(this.tableDataSentence, 0, tableData);
    },
    getSearchStudy() {
      let dateArr = this.value1;

      if (dateArr.length === 0) {
        this.$message.error("请选择时间段");
        return null;
      }
      let param = {
        start_time: formatDate(new Date(dateArr[0]), "yyyy-MM-dd 00:00:00"),
        end_time: formatDate(new Date(dateArr[1]), "yyyy-MM-dd 23:59:59"),
        type: 9,
      };
      if (
        param.start_time == this.param.start_time &&
        param.end_time == this.param.end_time
      ) {
        return;
      }
      this.getStudentStudyWordInfo(param);
    },
    makeMapData(data, dateArr) {
      let result = {};
      let valArr = [];
      let final = {};
      data.map((a) => {
        let tim = a.study_time.substring(0, 10);
        result[tim]
          ? (result[tim] += a.word_list.length)
          : (result[tim] = a.word_list.length);
      });
      dateArr.map((b) => {
        let c = result[b] ? result[b] : 0;
        valArr.push(c);
      });
      final = {
        num: valArr,
        time: dateArr,
      };
      return final;
    },
    getStudentStudyWordInfo(param) {
      this.param = param;
      this.loading = true;
      getStudentStudyWordInfo(param).then((res) => {
        let data = res.data;
        let dateArr = dealDate(param.start_time, param.end_time);
        let result = this.makeMapData(data, dateArr);
        this.drawMap(result);
        this.loading = false;
      });
    },
    drawMap(p) {
      //折线图
      let myEcharts1 = this.$echarts.init(
        document.querySelector("#studyInfoMap")
      );
      let option = {
        color: ["#1ed36f"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        legend: {
          data: ["num"],
          itemGap: 5,
        },
        grid: {
          top: "12%",
          left: "1%",
          right: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: p.time,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单词（个）",

            axisLabel: {
              formatter: function (a) {
                a = +a;
                return a;
              },
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            start: 94,
            end: 100,
          },
          {
            type: "inside",
            start: 94,
            end: 100,
          },
          {
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 30,
            height: "80%",
            showDataShadow: false,
            left: "93%",
          },
        ],
        series: [
          {
            name: "单词量",
            type: "bar",
            data: p.num,
          },
        ],
      };
      myEcharts1.setOption(option);
    },
    getPercentage(date) {
      let dayNum = new Date(date).getDate();
      let index = this.onLineTimeData.duration_today_vo_list.findIndex(
        (item) => {
          return item.create_time == dayNum;
        }
      );
      let studyTime = 0;
      let onlineTime = 0;
      let progessNum = 0;
      if (index != -1) {
        studyTime = this.onLineTimeData.duration_today_vo_list[index].use_time;
        onlineTime = this.onLineTimeData.duration_today_vo_list[index]
          .online_time;
        progessNum = parseInt((studyTime / onlineTime) * 100);
      }
      return {
        studyTime,
        onlineTime,
        progessNum,
        dayNum,
      };
    },
    formatProgress(date) {
      let num = new Date(date).getDate();
      return num + "";
    },
    selectDate(val, selectDom) {
      console.log(val, selectDom);
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    getOnlineTime() {
      let data = {};
      if (this.checkedYear && this.checkedMouth) {
        data.time = this.checkedYear + "-" + this.checkedMouth;
      } else {
        data.time =
          new Date().getFullYear() + "-" + (new Date().getMonth() + 1);
      }
      let sData = data.time.split("-");
      if (sData[1] < 10) {
        sData[1] = "0" + sData[1];
      }
      data.time = sData.join("-");
      getOnlineTime(data).then((res) => {
        if (res.code == 200) {
          if (res.data.duration_today_vo_list) {
            res.data.duration_today_vo_list.forEach((item) => {
              item.sentence_time = item.use_time;
              item.use_time =
                item.word_time +
                item.read_time +
                item.grammar_time +
                item.sentence_time;
            });
          }
          this.onLineTimeData = res.data;
        }
      });
    },
    getClassData() {
      getClassData().then((res) => {
        res.data = res.data.filter((item) => {
          return item.status == 0;
        });
        if (res.code == 200 && res.data) {
          let unitIdList = [];
          res.data.forEach((item) => {
            unitIdList.push(item.book_id);
            let data = [];
            if (item.word_book_vo_list && item.word_book_vo_list.length > 0) {
              let totalNum = item.word_book_vo_list[0].total_number;
              for (let i = 0; i < 4; i++) {
                let indexData = item.word_book_vo_list.findIndex((item) => {
                  return item.source == i;
                });

                if (indexData > -1) {
                  data.push({
                    totalNum,
                    studyNum: item.word_book_vo_list[indexData].study_number,
                    category: i,
                    number: item.word_book_vo_list[indexData].number,
                  });
                } else {
                  data.push({
                    totalNum,
                    studyNum: 0,
                    category: i,
                    number: 1,
                  });
                }
              }
            }
            data.forEach((item) => {
              item.progessNum = parseInt((item.studyNum / item.totalNum) * 100);
            });
            data.sort((a, b) => {
              return a.category - b.category;
            });
            item.classData = data;
          });
          this.classData = res.data;
          // 记忆 memory
          // 词听 listening
          // 听写 listeningWrite
          // 默写 write
          let that = this;
          this.classData.forEach((item) => {
            if (item.book_id == 2070 || item.book_id == 2071) {
              item.classData = item.classData.filter((item1) => {
                return item1.category == 0 || item1.category == 2;
              });
            }
            item.classData.forEach((item1) => {
              switch (item1.category) {
                case 0:
                  that.wordTotal.memory += item1.studyNum;
                  break;
                case 1:
                  that.wordTotal.listening += item1.studyNum;
                  break;
                case 2:
                  that.wordTotal.listeningWrite += item1.studyNum;
                  break;
                case 3:
                  that.wordTotal.write += item1.studyNum;
                  break;
                default:
                  console.log("Sorry, we are out of " + item1.category + ".");
              }
            });
          });
          if (unitIdList.length > 0) {
            getUnitStatusList(unitIdList).then((res) => {
              if (res.code == 200) {
                this.unitStatusList = res.data;
                this.findStudyCentreNum();
              }
            });
          }
        }
      });
    },
    countWordNumForSentence() {
      countWordNumForSentence().then((res) => {
        res.data = res.data.filter((item) => {
          return item.status == 0;
        });
        if (res.code == 200 && res.data) {
          let unitIdList = [];
          res.data.forEach((item) => {
            unitIdList.push(item.book_id);
            let data = [];
            if (item.word_book_vo_list && item.word_book_vo_list.length > 0) {
              let totalNum = item.word_book_vo_list[0].total_number;
              for (let i = 0; i < 4; i++) {
                let indexData = item.word_book_vo_list.findIndex((item) => {
                  return item.source == i;
                });

                if (indexData > -1) {
                  data.push({
                    totalNum,
                    studyNum: item.word_book_vo_list[indexData].study_number,
                    category: i,
                    number: item.word_book_vo_list[indexData].number,
                  });
                } else {
                  data.push({
                    totalNum,
                    studyNum: 0,
                    category: i,
                    number: 1,
                  });
                }
              }
            }
            data.forEach((item) => {
              item.progessNum = parseInt((item.studyNum / item.totalNum) * 100);
            });
            data.sort((a, b) => {
              return a.category - b.category;
            });
            item.classData = data;
          });
          this.sentenceData = res.data.filter((sentenceData) => {
            return sentenceData.book_id != 2070 && sentenceData.book_id != 2071;
          });
          let that = this;
          this.sentenceData.forEach((item) => {
            item.classData.forEach((item1) => {
              switch (item1.category) {
                case 0:
                  that.sentenceTotal.memory += item1.studyNum;
                  break;
                case 1:
                  that.sentenceTotal.listening += item1.studyNum;
                  break;
                case 2:
                  that.sentenceTotal.listeningWrite += item1.studyNum;
                  break;
                case 3:
                  that.sentenceTotal.write += item1.studyNum;
                  break;
                default:
                  console.log("Sorry, we are out of " + item1.category + ".");
              }
            });
          });
          if (unitIdList.length > 0) {
            findBookDetailsForSentence(unitIdList).then((res) => {
              if (res.code == 200) {
                this.sentenceUnitStatusList = res.data;
                this.findSentenceTotal();
              }
            });
          }
        }
      });
    },
    getStatus(bookId, category) {
      let data = [];
      let bookData = this.unitStatusList.filter((book) => {
        return book.book_id == bookId;
      });

      if (bookData.length > 0) {
        data = bookData[0].unit_student_details_vo_list.filter((item) => {
          return item.category == category;
        });
      }
      return data;
    },
    getSentenceStatus(bookId, category) {
      let data = [];
      let bookData = this.sentenceUnitStatusList.filter((book) => {
        return book.book_id == bookId;
      });
      if (bookData.length > 0) {
        data = bookData[0].unit_student_details_vo_list.filter((item) => {
          return item.category == category;
        });
      }
      return data;
    },
    getStudyDataWeek() {
      let params = {
        date: 1,
        pageSize: this.weekParams.pageSize,
        pageNum: this.weekParams.pageNum,
      };
      getStudyDataWeek(params).then((res) => {
        res.data.list.forEach((item) => {
          item.book_plan_vo_list.sort((a, b) => {
            return a.category - b.category;
          });
        });
        this.weekData = res.data;
        this.weekData.list = res.data.list.map((item) => {
          // 处理总学习量 totalLearning totalNewWord totalReview
          item.totalLearning = 0;
          item.totalNewWord = 0;
          item.totalReview = 0;
          item.totalLearningDetail = "(";
          item.totalNewWordDetail = "(";
          item.totalReviewDetail = "(";
          item.book_plan_vo_list.forEach((item1, index) => {
            item.totalLearning += item1.word_number;
            item.totalNewWord += item1.number;
            item.totalReview += item1.review_num;
            if (index == 3) {
              item.totalLearningDetail += item1.word_number + ")";
              item.totalNewWordDetail += item1.number + ")";
              item.totalReviewDetail += item1.review_num + ")";
              return;
            }
            item.totalLearningDetail += item1.word_number + "/";
            item.totalNewWordDetail += item1.number + "/";
            item.totalReviewDetail += item1.review_num + "/";
          });
          item.totalLearningString =
            item.totalLearning + item.totalLearningDetail;
          item.totalNewWordString = item.totalNewWord + item.totalNewWordDetail;
          item.totalReviewString = item.totalReview + item.totalReviewDetail;
          return item;
          // 处理总生词量 totalLearning
        });
        console.log(this.weekData.list, "weekData");
      });
    },
    getStudyDataMouth() {
      let params = {
        date: 2,
        pageSize: this.mouthParams.pageSize,
        pageNum: this.mouthParams.pageNum,
      };
      getStudyDataWeek(params).then((res) => {
        res.data.list.forEach((item) => {
          item.book_plan_vo_list.sort((a, b) => {
            return a.category - b.category;
          });
        });
        this.mouthData = res.data;
      });
    },
    handleCurrentChangeWeek(value) {
      this.weekParams.pageNum = value;
      this.getStudyDataWeek();
    },
    handleCurrentChangeMouth(value) {
      this.mouthParams.pageNum = value;
      this.getStudyDataMouth();
    },
    checkTimeItem(date, data) {
      if (data && data.type !== "current-month") {
        return;
      }
      if (!date) {
        date = new Date();
      }
      let year = new Date(date).getFullYear();
      let mouth = new Date(date).getMonth() + 1;
      let day = new Date(date).getDate();
      this.checkedYear = year;
      this.checkedMouth = mouth;
      this.checkedDay = day;
    },
    changeMouth(type) {
      if (type > 0) {
        if (this.checkedMouth + 1 > 12) {
          this.checkedYear++;
          this.checkedMouth = 1;
        } else {
          this.checkedMouth++;
        }
      } else {
        if (this.checkedMouth - 1 < 1) {
          this.checkedYear--;
          this.checkedMouth = 12;
        } else {
          this.checkedMouth--;
        }
      }
      this.getOnlineTime();
    },
    getTotalNum(data) {
      if (data && data.word_book_vo_list && data.word_book_vo_list[0]) {
        return data.word_book_vo_list[0].total_number;
      } else {
        return 0;
      }
    },
  },
  async created() {
    if (this.$route.query.activeName) {
      this.activeName = this.$route.query.activeName;
      // 获取学生信息
      if (this.activeName == "third") {
        let date = new Date(new Date().setMonth(new Date().getMonth() - 1));
        let param = {
          start_time: formatDate(date, "yyyy-MM-dd 00:00:00"),
          end_time: formatDate(new Date(), "yyyy-MM-dd 23:59:59"),
          type: 9,
        };
        this.getStudentStudyWordInfo(param);
      }
    }
    if (this.$store.getters.token) {
      await this.$store.dispatch("SetTimeEnglish", 1);
    }
    this.getOnlineTime();
    this.getClassData();
    this.countWordNumForSentence();
    this.getStudyDataWeek();
    this.getStudyDataMouth();
    this.checkTimeItem();
  },

 async mounted() {
   var arrs = [
     searchStudyReportIntelligentReview,
     searchStudyReportSynchronizeSentences,
     searchStudyReportSynchronizeSentencesReview,
     searchStudyReportSynchronizeTesto,
     searchStudyReportSynchronizedPractice,
     searchSmartReviewIsSkip,
     searchWordReviewNumList,
     searchStudyReportExperienceWordLibrary,
     searchStudyReportWordShorthand
   ];
   let bookId = JSON.parse(localStorage.getItem("bookData")).book_id,
     a;
   arrs.map(async (v) => {
      a = await v({
        startTime:"2023-12-12",
        endTime:"2024-01-12",
        studentId: 143987,
        bookId
      });
     console.log(JSON.stringify(a), String(v));
   });
   
    
   console.log(JSON.stringify(a),"searchStudyReportIntelligentReview");
    a = await searchStudyReportIntelligentReview({
    startTime:"2023-12-12",
    endTime:"2024-01-12",
    bookId
   });
   console.log(JSON.stringify(a),"searchStudyReportIntelligentReview");
    
  }
};
</script>
<style scoped>
  /* .color{
    color: #3caa85;
    color: #e1e135;
    color: #9a8209;
    color: #2a26ec;
    color: #0b9c21;
    color: #819384;
    color: #f86790;
    color: #9b05ac;
  } */

.report-tab-home{
  position: relative;
  width: 100%;
  height: 100%;
}

.report-tab-home_1,
.report-tab-home_2,
.report-tab-home_3,
.report-tab-home_4,
.report-tab-home_5{
  float: left;
  width: 20%;
  height: 100%;
  font-size: 15px;
/* border: 1px solid red; */
}
.report-tab-home_2{
width: 15%;
}
.report-tab-home_3{
width: 15%;
}
.report-tab-home_4{
width: 40%;
}
.report-tab-home_5{
width: 10%;
}

.report-tab-home-two{
  width: 89%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
}

.report-tab-home_two_1_ul>li{
  list-style-type: none;
  margin-left: 7px;
  line-height: 35px;
  font-size: 12px;
}
.report-tab-home_two_1_ul>li>div{
  margin-left: 5px;
  width: 25px;
  height: 20px;
  background-color: #ee4c44;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}

.report-tab-home_5-1{
  position: absolute;
  top: 100%;
  width: 10%;
  /* background-color: rgba(0,0,0,0.1); */
  height: 700px;
}

.report-tab-home_5-1_1{
  width: 100%;
  height: 80px;
}



.display_flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.display_flex_left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.display_flex_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.display_flex_top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.display_flex_bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* --- select的基础样式 --- */
.selects {
  width: 60%;
  height: 35px;
  /* font-size: 18px; */
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px 1px rgba(128, 126, 126, 0.1);
}

.selects:focus {
  outline: none;
}

.selectall {
  width: 100%;
  height: 100%;
  /* font-size: 19px; */
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px 2px rgba(128, 126, 126, 0.2);
}

.selectall:focus {
  outline: none;
}

.report-tab-home_3>div{
  width: 100%;
  height: 50%;
}

/* ====== 按钮类 ====== */
.button {
  width: 65px;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  border: none;
  letter-spacing: 2px;
  /* font-size: 17px; */
}

.button::placeholder{
  color: rgba(0,0,0,0.8);
}

.button_min {
  width: 40px;
  height: 25px;
  line-height: 25px;
}

.button_color_white {
  color: white;
}

.button_bg_queren {
  background-color: rgb(7, 67, 246,0.9);
  color: white;
}

.button_bg_del {
  background-color: #ee4c44;
  color: white;
}

.button_bg_quxiao {
  background-color: white;
}

/* /deep/ .el-table thead.is-group th{
  border: 1px solid;
} */
</style>
